[Serverless nav] Handle groups and vertical space #169251
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…rouping-and-spacing
sebelga
added
release_note:skip
|
Pinging @elastic/appex-sharedux (Team:SharedUX) |
sphilipse
approved these changes
Oct 19, 2023
Heenawter
approved these changes
Oct 19, 2023
jgowdyelastic
approved these changes
Oct 19, 2023
davismcphee
approved these changes
Oct 19, 2023
sabarasaba
approved these changes
Oct 23, 2023
💚 Build Succeeded
Metrics [docs]Public APIs missing comments
Async chunks
Page load bundle
Unknown metric groupsAPI count
History
To update your PR or re-run it, just comment with: cc @sebelga |
kibanamachine
added
v8.12.0
backport:skip
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In this PR I've updated the Serverless side nav to handle better the different types of groups that we render in the navigation. I've also added a new
spaceBeforeprop to the node definition that allow consumer to customize the space between nodes.If no space is provided the default is: we add a EUI
"m"space before each of the group at level 1 of the tree. Those are the groups underneath the main collapsible item (with the icon shown when collapsed).Note for reviewers
The best way to test is by openin the "Storybooks Preview" (link in CI status)
Group types -
renderAspropA group renders differently based on the
renderAsprop defined. This property accept the following valuesblock: This is the default is not specified. The group will render as a block of navigation links. No indent. If atitleis provided then a bold title appears on top of the group.accordion: As expected, this renders an accordion that can show/hide the links (or nested groups) underneath. Those do have an indent.panelOpener: This group render as a link + an icon on the right. Clicking on the link opens a landing page. Clicking on the icon opens a panel on the right. The content of the panel can be auto-generated using the same navigation tree definition or a custom component can be provided by the consumer.item: This group render exactly like any other items in the current list. This is useful if we want to declare descendantchildrenof a node (and have those children nodes appear in the breadcrumb if they match the current URL location) but we don't want it to render as any of the above groups.Screenshots
In the screenshot below, the vertical space between is the default space applied to level 1 groups.
Fixes #167323